<template>
	<view style="background-color: #f6f6f6;">
		<u-navbar :is-back="true" title="上传案例" :border-bottom="false" :background="{backgroundColor: '#00a8ff'}">

		</u-navbar>
		<view class="u-m-b-26" style="background-color: #FFFFFF;">
			<u-cell-group class="u-p-l-26 u-p-r-26" :border="false">
				<u-cell-item title="选择分类" :value="fenlei" @click="selClick()"></u-cell-item>
				<u-picker v-model="atShow" title="选择分类" mode="selector" :default-selector="[2]" :range="selector"
					@confirm="confirmSelector"></u-picker>
				<u-cell-item title="案例标题" value="请输入标题,≤50字符" :arrow="false" :border-bottom="false"></u-cell-item>
				<u-input v-model="caseTitle" type="textarea" :border="true" />
				<u-cell-item title="关联服务" :value="glfu" @click="openinfo('/pages/tabBar/my/myCase/relevance')"
					:border-bottom="false"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-m-b-26" style="background-color: #FFFFFF;">
			<u-cell-group class="u-p-l-26 u-p-r-26" :border="false">
				<u-cell-item title="案例轮播图" :value="fileList.length" :arrow="false" :border-bottom="false"></u-cell-item>
				<text class="u-p-l-30" style="font-size: 24rpx;color: #a0a0a0;">请上传案例封面图，方便患者参考，建议尺寸（500*300px）</text>
				<view class="u-p-l-30">
					<u-upload ref="uUpload" :auto-upload="true" :action="action" @on-change="onChange1"
						:file-list="fileList" :max-size="5 * 1024 * 1024" max-count="6"></u-upload>
				</view>
			</u-cell-group>
		</view>
		<view class="u-m-b-26" style="background-color: #FFFFFF;">
			<u-cell-group class="u-p-l-26 u-p-r-26" :border="false">
				<u-cell-item title="术前诊断" :title-style="titleStyle" :border-bottom="false" :arrow="false"></u-cell-item>
				<u-cell-item title="语言描述" value="请输入描述,≤50字符" :arrow="false"></u-cell-item>
				<u-input v-model="surgery_before_text" type="textarea" :border="true" />
				<u-cell-item title="上传图片" :value="fileList.length" :arrow="false" :border-bottom="false"></u-cell-item>
				<text class="u-p-l-30" style="font-size: 24rpx;color: #a0a0a0;">请上传案例"术前诊断"图，方便患者参考</text>
				<view class="u-p-l-30">
					<u-upload ref="uUpload" :auto-upload="true" :action="action" @on-change="onChange2"
						:file-list="fileList" :max-size="5 * 1024 * 1024" max-count="6"></u-upload>
				</view>
			</u-cell-group>
		</view>
		<view class="u-m-b-26" style="background-color: #FFFFFF;">
			<u-cell-group class="u-p-l-26 u-p-r-26" :border="false">
				<u-cell-item title="方案设计" :title-style="titleStyle" :border-bottom="false" :arrow="false"></u-cell-item>
				<u-cell-item title="语言描述" value="请输入描述,≤50字符" :arrow="false"></u-cell-item>
				<u-input v-model="design_text" type="textarea" :border="true" />
				<u-cell-item title="上传图片" :value="fileList.length" :arrow="false" :border-bottom="false"></u-cell-item>
				<text class="u-p-l-30" style="font-size: 24rpx;color: #a0a0a0;">请上传案例"方案设计"图，方便患者参考</text>
				<view class="u-p-l-30">
					<u-upload ref="uUpload" :auto-upload="true" :action="action" @on-change="onChange3"
						:file-list="fileList" :max-size="5 * 1024 * 1024" max-count="6"></u-upload>
				</view>
			</u-cell-group>
		</view>
		<view class="u-m-b-26" style="background-color: #FFFFFF;">
			<u-cell-group class="u-p-l-26 u-p-r-26" :border="false">
				<u-cell-item title="手术总结" :title-style="titleStyle" :border-bottom="false" :arrow="false"></u-cell-item>
				<u-cell-item title="语言描述" value="请输入描述,≤50字符" :arrow="false"></u-cell-item>
				<u-input v-model="surgery_summary" type="textarea" :border="true" />
				<u-cell-item title="上传图片" :value="fileList.length" :arrow="false" :border-bottom="false"></u-cell-item>
				<text class="u-p-l-30" style="font-size: 24rpx;color: #a0a0a0;">请上传案例"手术总结"图，方便患者参考</text>
				<view class="u-p-l-30">
					<u-upload ref="uUpload" :auto-upload="true" :action="action" @on-change="onChange4"
						:file-list="fileList" :max-size="5 * 1024 * 1024" max-count="6"></u-upload>
				</view>
			</u-cell-group>
		</view>
		<u-button type="primary" style="width: 90%;margin: 40rpx auto;" @click="upS()">上传</u-button>
	</view>
</template>

<script>
	import {
		ossAccessid,
		ossHost,
		ossSignature,
		ossPolicyBase64
	} from "@/common/ossUploadfile.js"
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#00a8ff'
				},
				// 图片上传地址
				action: 'http://zjmeifeng.oss-cn-beijing.aliyuncs.com',
				fileList: [],
				selector: [],
				fenlei: '请选择',
				glfu: '未选择',
				caseIndex: '',
				atShow: false,
				titleStyle: {
					type: Object,
					default () {
						return {
							"color": "#87DDDD",
							"font-size": "80rpx"
						};
					}
				},
				// 分类id
				cate_id: '',
				// 案例标题
				caseTitle: '',
				// 商品id
				goodsid: '',
				// 轮播图
				images1: '',
				// 术前诊断
				surgery_before_text: '',
				// 术前诊断图片
				surgery_before_image: '',
				//design_text 方案设计
				design_text: '',
				design_images: '', // 方案设计图
				surgery_summary: '', //请填写手术总结描述
				surgery_summary_images: '' //请上传手术总结图片
			}
		},
		onLoad() {
			// 获取案例分类
			this.getCaseindex();

		},
		onShow() {


			if (this.goodsid != '') {
				this.glfu = '已选择';
			} else {
				this.goodsid = uni.getStorageSync('caseid');
				console.log(this.goodsid);
				uni.removeStorageSync('caseid');
			}


		},
		created() {

		},

		methods: {
			openinfo(url) {
				uni.navigateTo({
					url: url,
				});
			},
			retOn(path) {
				let str = "";
				for (let index in path) {
					str += path[index] + ",";
				}
				console.log("str前" + str)
				str = str.replace(/,$/gi, "");
				console.log(str);
				return str;
			},
			onChange1(res, index, lists, name, path) {
				this.images1 = this.retOn(path);
			},
			onChange2(res, index, lists, name, path) {
				this.surgery_before_image = this.retOn(path);
			},
			onChange3(res, index, lists, name, path) {
				this.design_images = this.retOn(path);
			},
			onChange4(res, index, lists, name, path) {
				this.surgery_summary_images = this.retOn(path);
			},

			selClick() {
				console.log("选择分类");
				this.atShow = true;
			},
			confirmSelector(e) {
				console.log("回传函数")
				console.log(e);
				this.fenlei = this.selector[e]
				// 分类id
				// console.log(this.caseIndex[e].id)

				this.cate_id = this.caseIndex[e].id
			},
			// 获取分类列表
			getCaseindex() {
				this.$apiCase.index({

				}).then((res) => {
					console.log('request success', res);
					// 获取的数据
					this.caseIndex = res.data.data;
					console.log("this.caseIndex: " + this.caseIndex);
					for (let index in this.caseIndex) {
						this.selector.push(this.caseIndex[index].title);
					}
					console.log(": " + this.selector);
				}).catch((err) => {
					console.log('request fail', err);
				})

			},
			upS() {
				console.log("上传案例")
				let a = {
					cate_id: this.cate_id,
					title: this.caseTitle,
					goods_id: this.goodsid,
					images: this.images1,
					surgery_before_text: this.surgery_before_text,
					surgery_before_image: this.surgery_before_image,
					design_text: this.design_text,
					design_images: this.design_images,
					surgery_summary: this.surgery_summary,
					surgery_summary_images: this.surgery_before_image
				}
				for (let key in a) {
					console.log(a[key]);
					if (a[key] == '') {
						let title = '';
						switch (key) {
							case 'cate_id':
								title = "请选择分类";
								break;
							case 'title':
								title = "请输入标题";
								break;
							case 'goods_id':
								title = "请选择关联服务";
								break;
							case 'images':
								title = "请上传案例轮播图";
								break;
							case 'surgery_before_text':
								title = "请输入术前描述";
								break;
							case 'surgery_before_image':
								title = "请上传术前诊断图";
								break;
							case 'design_text':
								title = "请输入方案设计描述";
								break;
							case 'design_images':
								title = "请上传方案设计图";
								break;
							case 'surgery_summary':
								title = "请输入手术总结描述";
								break;
							case 'surgery_summary_images':
								title = "请上传手术总结图";
								break;
						}
						uni.showToast({
							title: title
						})
						return;
					}
				}
				// console.log(a);
				this.$apiCase.create({
					cate_id: this.cate_id,
					title: this.caseTitle,
					goods_id: this.goodsid,
					images: this.images1,
					surgery_before_text: this.surgery_before_text,
					surgery_before_image: this.surgery_before_image,
					design_text: this.design_text,
					design_images: this.design_images,
					surgery_summary: this.surgery_summary,
					surgery_summary_images: this.surgery_before_image
				}).then((res) => {
					console.log('request success', res);
					if (res.data.msg == "上传成功") {
						uni.showToast({
							title: '上传成功'
						})

						setTimeout(() => {
							uni.navigateBack({

							})
						}, 2000)
					}
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			submit() {
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.fileList.filter(val => {
					return val.progress == 100;
				})
				// 如果您不需要进行太多的处理，直接如下即可
				// files = this.$refs.uUpload.lists;
				console.log(files)
			}
		}
	}
</script>

<style scoped lang="scss">

</style>
